<template>
	<view v-if="onLineSettings">
		<!-- 连麦遮罩层 -->
		<view class="on_line_mask" @tap="close" />
		<view class="on_line">
			<view class="on_line_top">
				<text class="on_line_title">
					语音连麦
				</text>
				<text class="on_line_edit" @tap="close">
				
				<image class="back_xx" @tap="close" src="@/static/zhibo/guanbi1.png" />
				</text>
			</view>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y Invite">
				<view class="Invite_item" v-for="(item, index) in yuyinInfo" :key="index">
					<view class="Invite_item_l">
						<image class="Invite_item_img" :src="item.user.avatarUrl" />
						<text class="fs-30">
							{{ item.user.nickName }}
						</text>
					</view>
					<text class="Invite_btn fs-20" @click="openApply(item)">
						邀请
					</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		computed: mapState({
			configInfo: state => state.config.configInfo,
			old_attendant_name: state => state.config.old_attendant_name,
			commonOptions: state => state.user.commonOptions,
			locationChange: state => state.user.locationChange,
			locationChangeUnix: state => state.user.locationChangeUnix,
			userInfo: state => state.user.userInfo,
			coachInfo: state => state.user.coachInfo,
		}),
		props: {
			'onLineSettings': {
				type: Boolean,
				default: false
			},
			'yuyinInfo': {
				type: Array,
				default: []
			}
		},
		data() {
			return {

			}
		},
		mounted() {
			// this.audience()
		},
		methods: {
			close() {
				this.$emit("closeLine")
			},
			openApply(item) {
				uni.$api.user['getPushUrl']({
					streamName: item.live_id,
					zbuser_id:this.userInfo.id,
					yhuser_id: item.user_id
				}).then().catch(res=>{
					console.log(998888,res)
					uni.setStorageSync('playLiveData',res.zb_lurl)
					uni.setStorageSync('playLiveDatas',{
						streamName: item.live_id,
						zbuser_id:this.userInfo.id,
						yhuser_id: item.user_id
					})
				})
				const res =  uni.$api.user['lienmai']({
					live_id: item.live_id,
					user_id: item.user_id
				})
				if (res) {
					this.$emit("closeLine")
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.text-white {
		color: #fff;
	}

	//语音连麦
	.on_line {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 800rpx;
		border-radius: 40rpx 40rpx 0 0;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.on_line_mask {
		width: 750rpx;
		height: 730rpx;
		position: fixed;
		top: 0;
		left: 0;
		overflow: hidden;
		z-index: 1000;
	}

	.on_line_top {
		width: 750rpx;
		height: 100rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.on_line_title {
		width: 650rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
	}

	.on_line_edit {
		color: rgb(185, 184, 188);
	}

	.Invite {
		height: 680rpx;
		width: 750rpx;
		display: flex;
		flex-direction: column;
		overflow: auto;
	}

	.Invite_item {
		height: 125rpx;
		width: 750rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
	}

	.Invite_item_l {
		width: 550rpx;
		height: 125rpx;
		display: flex;
		align-items: center;
		flex-direction: row;
	}

	.Invite_item_img {
		width: 110rpx;
		height: 110rpx;
		border-radius: 55rpx;
		line-height: 110rpx;
		margin-right: 25rpx;
		text-align: center;
	}

	.Invite_btn {
		width: 120rpx;
		height: 55rpx;
		border-radius: 45rpx;
		color: #fff;
		line-height: 55rpx;
		text-align: center;
		background: linear-gradient(to right, #4fb784, #a4d79f);
	}
</style>